<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>手机横、竖屏事件</title>
    <style>
        @media screen and (orientation: portrait) {
            html {
                width: 100%;
                height: 100%;
                background-color: white;
                overflow: hidden;
            }

            body {
                width: 100%;
                height: 100%;
                background-color: red;
                overflow: hidden;
            }
        }

        @media screen and (orientation: landscape) {
            html {
                width: 100%;
                height: 100%;
                background-color: white;
            }

            body {
                width: 100%;
                height: 100%;
                background-color: white;
            }

            #print {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: yellow;
            }
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
// //屏幕方向标识，0横屏，其他值竖屏
// var orientation=0;
// //转屏事件，内部功能可以自定义
// function screenOrientationEvent(){
//     if(orientation == 0)document.getElementById("change").value="竖";
//     else document.getElementById("change").value="横";
// }
// var innerWidthTmp = window.innerWidth;
// //横竖屏事件监听方法
// function screenOrientationListener(){
//     try{
//         var iw = window.innerWidth;    
//         //屏幕方向改变处理
//         if(iw != innerWidthTmp){
//             if(iw>window.innerHeight)orientation = 90;
//             else orientation = 0;
//             //调用转屏事件
//             screenOrientationEvent();
//             innerWidthTmp = iw;
//         }
//     } catch(e){alert(e);};
//     //间隔固定事件检查是否转屏，默认500毫秒
//     setTimeout("screenOrientationListener()",500);
// }
// //启动横竖屏事件监听
// screenOrientationListener();
        /**
         * 横竖屏
         * @param {Object}
         */

// function changeOrientation($print) {  
//   var width = $("body").width();
//   var height = $('body').height();
//   if(width < height) {
// 	  $print.width(height);
// 	  $print.height(width);
// 	  $print.css('top',  (height - width) / 2 );
// 	  $print.css('left',  0 - (height - width) / 2 );
// 	  $print.css('transform', 'rotate(90deg)');
// 	  $print.css('transform-origin', '50% 50%');
//   } 

// var evt = "onorientationchange" in window ? "orientationchange" : "resize";

// window.addEventListener(evt, function() {

//     setTimeout(function() {
//         var width = document.documentElement.clientWidth;
//         var height =  document.documentElement.clientHeight;
//         // 刷新城市的宽度
//         initCityWidth();
//         // 初始化每个气泡和自行车碰撞的距离
//         cityCrashDistanceArr = initCityCrashDistance();

//         if( width > height ){
//             $print.width(width);
//             $print.height(height);
//             $print.css('top',  0 );
//             $print.css('left',  0 );
//             $print.css('transform' , 'none');
//             $print.css('transform-origin' , '50% 50%');
//         }else {
//             $print.width(height);
//             $print.height(width);
//             $print.css('top',  (height-width)/2 );
//             $print.css('left',  0-(height-width)/2 );
//             $print.css('transform' , 'rotate(90deg)');
//             $print.css('transform-origin' , '50% 50%');
//         }
//     }, 300);	
// }, false);







    // 屏幕旋转事件：onorientationchange
    // 添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
    // 判断屏幕是否旋转
    // function orientationChange() {
    //     var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    //     switch(window.orientation) {
    //     　　case 0: 
    //             alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             break;
    //     　　case -90: 
    //             alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             break;
    //     　　case 90:   
    //             alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //             break;
    //     　　case 180:   
    //         　　alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
    //         　　break;
    //     }
    // }; 

    // // 添加事件监听
    // addEventListener('load', function(){
    //     orientationChange();
    //     window.onorientationchange = orientationChange;
    // });





// var evt = "onorientationchange" in window ? "orientationchange" : "resize";

// window.addEventListener(evt, function() {
//     console.log(evt);
//     console.log(window.orientation);
//     var width = document.documentElement.clientWidth;
//     var height =  document.documentElement.clientHeight;
//     $print =  $('#print');
//     if( width > height ){

//         $print.width(width);
//         $print.height(height);
//         $print.css('top',  0 );
//         $print.css('left',  0 );
//         $print.css('transform' , 'none');
//         $print.css('transform-origin' , '50% 50%');
//     }
//     else{
//         $print.width(height);
//         $print.height(width);
//         $print.css('top',  (height-width)/2 );
//         $print.css('left',  0-(height-width)/2 );
//         $print.css('transform' , 'rotate(90deg)');
//         $print.css('transform-origin' , '50% 50%');
//     }

// }, false);

//function checkOrient() {
//    alert(window.orientation);
//    if (window.orientation == 0 || window.orientation == 180){
//        var screenOrientation = 'portrait';
//    }
//    else if (window.orientation == 90 || window.orientation == -90){
//        var screenOrientation = 'landscape';
//    }
//    alert(screenOrientation);
//    return screenOrientation;
//}
//    // 添加事件监听
//addEventListener('load', function(){
//    checkOrient();
//    window.onorientationchange = checkOrient;
//});
    </script>
</head>
<!-- <body onload="screenOrientationEvent()"> -->

<body>
    <div>你好123</div>
    <input id="change" type="text" value="" />
</body>

</html>